<template>
  <div class="message" ref="container">
    <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
      <ul>
        <li v-for="(item,index) in list" :key="index" @click="toMessageInfo(item)">
          <p :class="item.state==1?'name':'name unRead'">{{item.title}}</p>
          <p class="date">{{item.create_time|time}}</p>
          <p class="money">{{item.content}}</p>
        </li>
      </ul>
    </mu-load-more>
  </div>
</template>

<script>
export default {
  data () {
    return {
      p: 1,
      page: 10,
      list: [],
      num: 10,
      refreshing: false,
      loading: false,
    }
  },
  created () {
    this.getPayRemindList()
  },
	mounted(){
    
	},
  methods: {
    toMessageInfo (item) {
      this.$router.push({ path: '/mine/PartyPayment/messageInfo', query: item })
      this.$http.post(`applets/Pay/read_remind`,{ id: item.id })
    },
    async getPayRemindList () {
      try {
        let params = {
          p: this.p,
          page: this.page,
          uid: JSON.parse(Cookies.get('user_71ydj')).id
        }
        const url = `applets/Pay/pay_remind_list`
        let res = await this.$http.get(url,params)
        this.loading = false;
        this.$progress.done()
        if (res.code === 200) {
          res.data.data.forEach(e => {
            this.list.push(e)
          });
          if(!res.data.data.length){
            this.p--
          }
        }
      } catch (e) {
        console.log('​catch -> e', e)
      }
    },
    async refresh () {
      this.refreshing = true
      this.$refs.container.scrollTop = 0
      try {
        let params = {
          p: 1,
          page: this.page * this.p,
          uid: JSON.parse(Cookies.get('user_71ydj')).id
        }
        const url = `applets/Pay/pay_remind_list`
        let res = await this.$http.get(url,params)
        this.refreshing = false
        if (res.code === 200) {
          this.list = res.data.data
        }
      } catch (e) {
        console.log('​catch -> e', e)
      }
    },
    load () {
      this.loading = true;
      this.p++
      this.getPayRemindList()
    }
  }
}
</script>

<style lang="scss" scoped>
.message{
  box-sizing: border-box;
  background-color: #F9F9F9;
  height:100vh;
  ul{
    box-sizing: border-box;
    list-style: none;
    width:100%;
    padding: 30px 16px;
    li{
      width:100%;
      background:rgba(255,255,255,1);
      box-shadow:0px 5px 11px 2.5px rgba(214,214,214,0.3);
      border-radius:4px;
      margin-bottom: 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 18px 16px;
      box-sizing: border-box;
      p{
        margin: 0;
      }
      .name{
        font-size:16px;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
        margin-bottom: 15px;
        color:rgba(153,153,153,1);
        &.unRead{
          color:rgba(51,51,51,1);
        }
      }
      .date,.money{
        font-size:14px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(153,153,153,1);
      }
      .date{
        margin-bottom: 10px;
      }
    }
  }
}
</style>
